<template>
  <!-- 拟稿模板 -->
  <div v-if="viewData.templateArr.length > 0" class="content">
    <!-- 顶部功能 -->
    <div class="top-tool">
      <div class="title">
        <span v-if="props.categroyVal === 0" class="ant-tooltip-open">请选择发文模板</span>
        <span v-else>请选择收文模板</span>
      </div>
      <div class="search">
        <a-input-search
          ref="refSearchInput"
          v-model:value="viewData.searchText"
          placeholder="请输入模板名称"
          enter-button="搜索"
          @search="onSearch"
          @blur="onSearchBlur"
          @keyup="onSearchKeyUp"
        />
        <svg-icon
          v-show="viewData.searchText.length > 0"
          icon-class="icon_select_delete"
          class-name="icon-select-delete"
          @click="onSearchClear"
        ></svg-icon>
      </div>
    </div>
    <!-- 模板列表 -->
    <div v-show="viewData.showArr.length > 0" class="template-list">
      <a-tooltip
        v-for="(item, i) in viewData.showArr"
        :key="i"
        placement="top"
        :title="item.templateName.length > 23 ? item.templateName : ''"
        :get-popup-container="triggerNode => triggerNode.parentNode"
      >
        <!-- <template #templateName>
          <span v-if="item.templateName.length > 23">{{ item.templateName }}</span>
        </template> -->
        <div class="template-item" @click="jumpPage(item)">
          <img :src="item.logo" alt="" />
          <div class="item-title">{{ item.templateName }}</div>
        </div>
      </a-tooltip>
    </div>
    <NoData
      v-show="viewData.showArr.length === 0 && viewData.searchText.length > 0"
      title="未搜索到相关内容，请重新尝试~"
    />
  </div>
  <NoData v-else-if="isLoading === false" />
  <!-- <LoadingImage v-show="isLoading"></LoadingImage> -->
</template>
<script setup>
import { ref, reactive, defineProps, watch, onMounted } from 'vue';
import NoData from '@/components/noData/index.vue';
import { Interface } from '@/api/create/create.js';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import LoadingImage from '@/components/loadingComponent/index.vue';

const props = defineProps({
  categroyVal: {
    type: Number,
    default: 0
  }
});
// watch(
//   props,
//   (newValue, oldValue) => {
//     // newValue 清空搜索 获取最新 收文/发文模板
//     console.log('The new counter value is: ' + newValue.categroyVal);
//   },
//   { deep: true }
// );
const router = useRouter();
const viewData = reactive({
  templateArr: [],
  showArr: [],
  searchText: ''
});
const refSearchInput = ref(null);
function onSearchClear() {
  viewData.searchText = '';
  refSearchInput.value.focus();
  viewData.showArr = viewData.templateArr;
}
function onSearchKeyUp(event) {
  viewData.searchText = viewData.searchText.replace(/\s/g, '');
  if (event.key === 'Enter') {
    event.target.blur();
  } else if (viewData.searchText.length > 50) {
    viewData.searchText = viewData.searchText.substring(0, 50);
  }
}
function onSearch() {
  refSearchInput.value.blur();
}
function onSearchBlur() {
  viewData.showArr = viewData.templateArr.filter(item =>
    item['templateName'].includes(viewData.searchText.replace(/\s/g, ''))
  );
}
const isLoading = ref(true);
function getTemplateList() {
  // isLoading.value = true;
  let params = {}; // 目前只有收文，不做区分
  Interface.GetTemplateList(params)
    .then(res => {
      // console.log('getTemplateList', res);
      if (res.code * 1 === 200) {
        isLoading.value = false;
        viewData.templateArr = res.data;
        viewData.showArr = viewData.templateArr;
      } else {
        message.error(res.msg);
      }
    })
    .finally(() => {
      isLoading.value = false;
    });
}
function jumpPage(item) {
  // console.log(item);
  localStorage.removeItem('startingActive');
  sessionStorage.removeItem('startingActive');
  router.push({
    path: '/formPage',
    query: {
      id: item.id,
      templateName: item.templateName,
      procDefId: item.procDefId // 控件id
    }
  });
}

onMounted(() => {
  // 发文模板列表
  getTemplateList();
});
</script>
<style lang="less" scoped>
@import './index.less';
/deep/
  .ant-input-search
  > .ant-input-group
  > .ant-input-group-addon:last-child
  .ant-input-search-button {
  // margin-top: -1px !important;
  height: 34px !important;
}
</style>
